<template>
  <view class="container">
    <view
      style="position: fixed; z-index: 99; background-color: #fff; width: 100%"
    >
      <view><uni-status-bar></uni-status-bar></view>
      <view class="search-box flex-cn" @click="backHome">
        <view class="navbar-left flex-cn" style="flex: 1">
          <view
            style="width: 100rpx; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          ></view>
        </view>
        <view
          style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #000;
            font-weight: 600;
          "
        >
          供应商申请
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
      <view class="tabs">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === tab.name }"
          @click="scrollToSection(tab.name, index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <view style="padding-top: 280rpx">
      <!-- 确保内容不被固定定位元素遮挡 -->
      <scroll-view
        class="content"
        scroll-y
        scroll-with-animation
        :scroll-into-view="currentView"
      >
        <block v-for="(tab, index) in tabs" :key="index">
          <view :id="`section-${index}`" class="section">
            <view class="section-title">
              <text class="line"></text>
              <text>{{ tab.name }}</text>
            </view>
            <view class="description">{{ tab.description }}</view>

            <view v-if="tab.name === '基础信息'" class="scroll_content">
              <view class="form-container">
                <view class="upload-section">
                    <view style="width:100%;position: relative;overflow: hidden;">
                      <image
                      :src="baseImg ? baseImg : 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66696b018d4b03222.jpg' "
                      class="upload-image"
                      @click="uploadFile('基础信息')"
                    ></image>
                    <!-- <view style="position:absolute;left:35px;top:35px;color: #4caf50;">上传营业执照</view> -->
                    </view>

                    <view  style="width:100%;position: relative;overflow: hidden;" >
                      <image
                      src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/666a5f3685e394417.png"
                      class="certificate-image"
                    ></image>
                    </view>
                  
                  </view>
                <view class="form-fields">
                
                  <view class="form-group">
                    <text class="label required">供应商名称</text>
                    <input type="text" placeholder="请输入供应商名称" v-model="addSupplier.name" />
                    <!-- 上传营业执照图片自动识别 -->
                  </view>
                  <view class="form-group">
                    <text class="label required">供应商简称</text>
                    <input type="text" placeholder="请输入供应商简称" v-model="addSupplier.short_name"/>
                  </view>
                  <view class="form-group">
                    <text class="label required">统一社会信用代码</text>
                    <input type="text" placeholder="请输入社会信用代码" v-model="addSupplier.social_credit_code"/>
                    <!-- 上传营业执照图片自动识别 -->
                  </view>
                  <view class="form-group">
                    <text class="label required">公司成立日期</text>
                    <picker
                      mode="date"
                      @change="onDateChange"
                      class="input_picker"
                    >
                      <view class="date-picker">
                        {{ addSupplier.company_create_time || "请选择公司成立日期" }}
                      <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>

                      </view>
                    </picker>
               
                  </view>
                  <view class="form-group">
                    <text class="label required">公司地址</text>
                    <input type="text" placeholder="请输入公司地址"  v-model="addSupplier.company_address" />
                    <!-- 上传营业执照图片自动识别 -->
                  </view>
                  <view class="form-group">
                    <text class="label required">主要供应渠道</text>
                    <radio-group class="radio-group" style="font-size: 12px"    @change="handleSupplyChannelChange">
                      <radio value="线上" :checked="addSupplier.supply_channel == '线上'" class="radio">线上</radio>
                      <!-- online -->
                      <radio value="线下" :checked="addSupplier.supply_channel == '线下'" class="radio">线下</radio>
                      <!-- offline -->
                    </radio-group>
                  </view>

                  <view class="form-group">
                    <text class="label required">供应商性质</text>
                    <picker
                      class="input_picker"
                      mode="selector"
                      :range="supplierList"
                      range-key="name"
                      @change="onSupplierChangeNature"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.nature || "请选择"
                        }}</text>
                    <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>

                      </view>
                    </picker>
                  </view>

                  <view class="form-group">
                    <text class="label required">联系人</text>
                    <input type="text" placeholder="请输入"   v-model="addSupplier.link_man" />
                  </view>

                  <view class="form-group">
                    <text class="label required">意向合作品类</text>
                     <picker
                        class="input_picker"
                        mode="multiSelector"
                        :range="multiArray"
                        :value="multiIndex"
                        @change="onPickerChange"
                        @columnchange="onColumnChange"
                      >
                        <view class="picker">
                          <text class="picker-text">{{ addSupplier.main_collaborate_class || "请选择" }}</text>
                          <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>
                        </view>
                      </picker>
                  </view>


                  <picker mode="multiSelector" :range="range" :value="selectedIndex" @change="onChange">
                    <view class="picker-trigger">请选择</view>
                  </picker>

                  <view class="form-group">
                    <text class="label required">联系电话</text>
                    <input type="text" placeholder="请输入" v-model="addSupplier.link_phone" />
                  </view>

                  <view class="form-group">
                    <text class="label required">注册资本</text>
                    <input type="text" placeholder="请输入"  v-model="addSupplier.registered_capital"/>
                    <text>万元</text>
                  </view>

                  <view class="form-group">
                    <text class="label required">纳税规模</text>
                    <radio-group
                      style="
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                      "
                      @change="handleSupplyPayTaxes"
                    >
                      <radio value="一般纳税人" :checked="addSupplier.tax_scale == '一般纳税人'" class="radio">一般纳税人</radio>
                      <radio value="小规模纳税人" :checked="addSupplier.tax_scale == '小规模纳税人'"  class="radio">小规模纳税人</radio>
                    </radio-group>
                  </view>

                  <view class="form-group">
                    <text class="label required">纳税证明附件</text>
                    <view class="upload">
                     <view class="upload-btn"  @click="uploadFile('纳税证明附件')">上传文件</view>
                      <text class="upload-tip"
                        >一般纳税人需上传纳税证明附件</text
                      >
                      <view v-for="(file, index) in attachment" :key="index" class="file-item">
                        <text class="file-name">{{ file.image_url }}</text>
                        <text class="delete-btn-update" @click="removeFile(index,'纳税证明附件')">删除</text>
                      </view>
                    </view>
                  </view>

                  <view class="form-group">
                    <text
                      class="required"
                      style="
                        font-weight: bold;
                        color: #333;
                        flex: 1;
                        font-size: 15px;
                      "
                      >年销售额</text
                    >
                      <input style="text-align:right" class="input" placeholder="请输入"    v-model="addSupplier.annual_turnover"  />
                    <text class="unit" >万元</text>
                  </view>

                  <view class="form-group">
                    <text class="label required">意向合作城市</text>
                    <picker
                      class="input_picker"
                      mode="selector"
                      :range="supplierCity"
                      range-key="name"
                      @change="onSupplierChangeCity"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.collaborate_city || "请选择"
                        }}</text>
                       <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>

                      </view>
                    </picker>
                  </view>

                  <view class="form-group">
                    <text class="label required">主营业务</text>
                    <input type="text" placeholder="请输入" v-model="addSupplier.main_business"   />
                  </view>
                </view>
              </view>
            </view>

            <view v-if="tab.name === '优势信息'" class="scroll_content" >
              <!-- 默认模块 -->
              <!-- <product-form  :product="mainProduct" :olindex="0"   @updateProduct="updateMainProduct"/>
              
              <view v-for="(list, olindex) in products" :key="olindex">
                <product-form
                  :product="list"
                  :olindex="olindex"
                  :showDelete="olindex !== 0"
                  @updateProduct="updateProduct"
                  @removeProduct="removeProduct"
                />
              </view> -->

              <!-- 显示所有产品 -->
              <view v-for="(product, olindex) in allProducts" :key="olindex">
                <product-form
                  :product="product"
                  :olindex="olindex"
                  :showDelete="olindex !== 0"
                  @updateProduct="updateProduct"
                  @removeProduct="removeProduct"
                />
              </view>

              <view
                class="add-product"
                @click="addProduct"
                style="
                  text-align: center;
                  border-bottom: 1px solid #e0e0e0;
                  padding: 10px 0;
                "
              >
                <text
                  class="feiIconfont icon-jiahao"
                  style="color: #9e9e9e"
                ></text>
                <text style="font-size: 16px; color: #4caf50"
                  >添加意向合作商品</text
                >
              </view>

              <!-- 另外一个模块 -->
              <view class="form-container">
                <view class="form-group">
                  <text style="font-size: 13px; font-weight: bold">(1)业务能力信息</text>
                </view>

                <view class="form-group">
                  <text class="label required">质量管理体系</text>
                  <picker
                      class="input_picker"
                      mode="selector"
                      :range="supplierQuality"
                      range-key="name"
                      @change="onSupplierChangeQuality"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.quality_management_system || "请选择品控认证体系"
                        }}</text>
                         <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>
                      </view>
                    </picker>
                </view>

                <view class="form-group">
                  <text class="label required">品控专员人员</text>
                  <input style="text-align: right;" class="input" v-model="addSupplier.special_post_num" placeholder="请输入人员数量，无则写'0'" />
                </view>

                <view class="form-group">
                  <text class="label">是否具有自主研发能力</text>
                  <radio-group class="radio-group" v-model="addSupplier.has_development_ability">
                    <label class="radio-label" style="margin-right: 20px;">
                      <radio :value="true" :checked="addSupplier.has_development_ability == 'true'"  /> 是
                    </label>
                    <label class="radio-label">
                      <radio :value="false" :checked="addSupplier.has_development_ability == 'false' "   /> 否
                    </label>
                  </radio-group>
                </view>

                <view class="form-group">
                  <text class="label">生产/加工/养殖能力</text>
                  <input style="text-align: right;" class="input" v-model="addSupplier.cultivation_ability" placeholder="请输入每日产能、养殖规模、生产/加工商需填..." />
                </view>

                <view class="form-group">
                  <text class="label">生产/加工厂场地规模</text>
                  
                  <picker
                      class="input_picker"
                      mode="selector"
                      :range="supplierScale"
                      range-key="name"
                      @change="onSupplierChangeScale"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.cultivation_scale || "请选择"
                        }}</text>
                         <!-- <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text> -->
                      </view>
                    </picker>
                </view>

                <view class="form-group">
                  <text class="label">是否有ODM/OEM代工能力</text>
                  <radio-group class="radio-group" v-model="addSupplier.odm_ability">
                    <label class="radio-label" style="margin-right: 20px;">
                      <radio :value="ture" :checked="addSupplier.odm_ability == 'ture' "   /> 是
                    </label>
                    <label class="radio-label">
                      <radio :value="false"  :checked="addSupplier.odm_ability == 'false' "   /> 否
                    </label>
                  </radio-group>
                </view>

                <view class="form-group">
                  <text class="label">ODM/OEM代工年限</text>
                  <input style="text-align: right;" class="input" v-model="addSupplier.odm_year" placeholder="如有ODM/OEM代工能力，需填写年限" />
                </view>

                <view class="form-group">
                  <text class="label required">物流能力</text>
                 
                  <picker
                      class="input_picker"
                      mode="selector"
                      :range="logistics_ability_list"
                      range-key="name"
                      @change="onSupplierChangeLogistics"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.logistics_ability || "请选择"
                        }}</text>
                         <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>
                      </view>
                    </picker>
                </view>

                <view class="form-group">
                  <text class="label required">是否提供活动支持能力</text>
                 
                  <picker
                      class="input_picker"
                      mode="selector"
                      :range="action_support_ability_list"
                      range-key="name"
                      @change="onSupplierChangeAction"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.action_support_ability || "请选择"
                        }}</text>
                         <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>
                      </view>
                    </picker>
                </view>


                <view class="form-group">
                  <text class="label required">质量管理体系认真证书</text>
                  <view class="upload" style="flex: 1;">
                   <view class="upload-btn"  @click="uploadFile('质量管理体系认真证书')">上传文件</view>
                   <view v-for="(file, index) in qualityControl" :key="index" class="file-item">
                        <text class="file-name">{{ file.image_url }}</text>
                        <text class="delete-btn-update" @click="removeFile(index,'质量管理体系认真证书')">删除</text>
                      </view>
                    <!-- <text class="upload-tip">请上传优势证明文件，如获奖、市场接受度、平台销售数据等</text> -->
                  </view>
                </view>

              </view>



              <view class="form-container">
                <view class="form-group">
                  <text style="font-size: 13px; font-weight: bold">(1)企业经营信息</text>
                </view>

                <view class="form-group">
                  <text class="label required">重点合作客户</text>
                  <input style="text-align: right;"  class="input" v-model="addSupplier.collaborate_customer" placeholder="请输入目前重点合作客户" />
                </view>

                <view class="form-group">
                  <text class="label required">年供货规模</text>
                  <picker
                      class="input_picker"
                      mode="selector"
                      :range="tons_scale_list"
                      range-key="name"
                      @change="onSupplierChangeTonsScale"
                    >
                      <view class="picker">
                        <text class="picker-text">{{
                          addSupplier.tons_scale || "请选择年供货规模"
                        }}</text>
                         <text class="feiIconfont icon-zhaobiaotoutiao_shouqiicon"></text>
                      </view>
                    </picker>
                </view>

                <view class="form-group">
                  <text class="label">供货品牌及产品举例</text>
                  <input  style="text-align: right;" class="input" v-model="addSupplier.product_example" placeholder="仅需填写重点商品或有代表性商品" />
                </view>

                <view class="form-group">
                  <text class="label required">供货凭证</text>
                  <view class="upload" style="flex: 1;">
                   <view class="upload-btn"  @click="uploadFile('供货凭证')">上传文件</view>
                    <text class="upload-tip">请上传重点合作客户供货凭证，限pdf及图片</text>
                    <view v-for="(file, index) in Supply" :key="index" class="file-item">
                        <text class="file-name">{{ file.image_url }}</text>
                        <text class="delete-btn-update" @click="removeFile(index,'供货凭证')">删除</text>
                      </view>
                  </view>
                </view>

              </view>

            </view>

            <view v-if="tab.name === '证照信息'" class="scroll_content" >
              
              <view class="form-container" style="margin-bottom: 100px;">

                <view class="form-group">
                  <text class="label required">商标注册证</text>
                  <view class="upload" style="flex: 1;">
                   <view class="upload-btn"  @click="uploadFile('商标注册证')">上传文件</view>
                    <text class="upload-tip">品牌方需上传</text>
                    <view v-for="(file, index) in trademarkList" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,'商标注册证')">删除</text>
                    </view>
                  </view>
                </view>

                <view class="form-group">
                  <text class="label required">流通/生产许可证</text>
                  <view class="upload" style="flex: 1;">
                   <view class="upload-btn"  @click="uploadFile('流通/生产许可证')">上传文件</view>
                    <text class="upload-tip">合作工业品需上传</text>
                    <view v-for="(file, index) in ProductionLicense" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,'流通/生产许可证')">删除</text>
                    </view>
                  </view>
                </view>

                <view class="form-group">
                  <text class="label required">品牌授权许可</text>
                  <view class="upload" style="flex: 1;">
                    <view class="upload-btn"  @click="uploadFile('品牌授权许可')">上传文件</view>
                    <text class="upload-tip">非品牌方需上传</text>
                    <view v-for="(file, index) in BrandAuthorizationLicense" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,'品牌授权许可')">删除</text>
                    </view>
                  </view>
                </view>

                <view class="form-group">
                  <text class="label required">加工区照片</text>
                  <view class="upload" style="flex: 1;">
                    <view class="upload-btn"  @click="uploadFile('加工区照片')">上传文件</view>
                    <text class="upload-tip">厂家及生产/加工商需上传</text>
                    <view v-for="(file, index) in PhotosProcessingArea" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,'加工区照片')">删除</text>
                    </view>
                  </view>
                </view>

                <view class="form-group">
                  <text class="label required">生产基地照片</text>
                  <view class="upload" style="flex: 1;">
                    <view class="upload-btn"  @click="uploadFile('生产基地照片')">上传文件</view>
                    <view v-for="(file, index) in PhotosProductionBase" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,生产基地照片)">删除</text>
                    </view>
                  </view>
                </view>

                <view class="form-group">
                  <text class="label required">其他证照证书</text>
                  <view class="upload" style="flex: 1;">
                    <view class="upload-btn"  @click="uploadFile('其他证照证书')">上传文件</view>
                    <view v-for="(file, index) in otherList" :key="index" class="file-item">
                      <text class="file-name">{{ file.image_url }}</text>
                      <text class="delete-btn-update" @click="removeFile(index,'其他证照证书')">删除</text>
                    </view>
                  </view>
                </view>

              </view>

            </view>
          </view>
        </block>
      </scroll-view>
    </view> 

    <view class="footer">
      <view class="icons" style="flex: 1">
        <view class="icon" @click="handlerRequire">
          <text
            class="feiIconfont icon-tubiao_touxiangkuang"
            style="font-size: 24px; color: #52c41a"
          ></text>
          <text class="fontS" >准入要求</text>
        </view>
        <view class="icon" @click="handlerProblem">
          <text
            class="feiIconfont icon-changjianwentixiangguanwenti"
            style="font-size: 24px; color: #52c41a"
          ></text>
          <text class="fontS" @click="handlerProblem">常见问题</text>
        </view>
      </view>

      <view style="display: flex; flex: 1; justify-content: center">
        <view class="Staging" @click="onTemporaryStorage">暂存</view>
        <view class="Submit" @click="onSubmit">提交</view>
        <!-- <view class="Submit" @click="deleteStorage">删除暂存</view> -->
      </view>

      <!-- <button class="apply-button" @click="handlerApply">立即申请</button> -->
    </view>

    <common_problem ref="popupComponent"></common_problem>
    <prepare_require ref="Ref_require"></prepare_require>
  </view>
</template>

<script>
import ProductForm from "./components/ProductForm.vue";
import common_problem from "./components/common_problem.vue";
import prepare_require from "./components/prepare_require.vue";
import { upload } from "@/request/index.js";
export default {
  components: {
    ProductForm,
    common_problem,
    prepare_require
  },
  data() {
    return {
      category: [
        {
          name: '生鲜',
          sub: ['水果', '蔬菜', '肉禽蛋', '海鲜水产', '熟食卤味']
        },
      ],
      multiArray: [],
      multiIndex: [0, 0],
      selectedCategory: '',
      baseImg:'',  //基础图片
      baseImgList:[],  //基础图片数组
      attachment:[],      //纳税证明附件         
      qualityControl:[],  //质量管理体系认真证书  
      Supply:[],          //供货凭证          
      trademarkList:[],   //商标注册证
      ProductionLicense:[],  //流通/生产许可证
      BrandAuthorizationLicense:[],  //品牌授权许可
      PhotosProcessingArea:[],   //加工区照片
      PhotosProductionBase:[],//生产基地照片
      otherList:[],//其他证照证书
      tons_scale_list:[
        {name:'500万以下'},
        {name:'500万-1000万'},
        {name:'1000万-5000万'},
        {name:'5000万-1亿元'},
        {name:'1亿元以上'},
      ],
      action_support_ability_list:[
        {
          name:'营销费用投入或其他支持',
        },
        {
          name:'协助策划营销活动',
        },
        {
          name:'不提供活动支持',
        },

      ],
      logistics_ability_list:[
        {
          name:'常温物流',
        },
        {
          name:'冷链物流',
        },
        {
          name:'不强制整车可配',
        },

      ],
      supplierScale:[
        {
          name:'销售区域有工厂或服务网点',
        },
        {
          name:'有屠宰及深加工制品能力',
        },
        {
          name:'有检验检测设备',
        },
        {
          name:'有检验检测设备/生产加工设备',
        },
        {
          name:'无',
        },
      ],
      supplierQuality:[
        {
          name:'ISO22000',
        },
        {
          name:'HACCP',
        },
        {
          name:'BRC',
        },
        {
          name:'IFSE',
        },
        {
          name:'SQF',
        },
        {
          name:'FSSC22000',
        },
        {
          name:'BAP',
        },
        {
          name:'其他',
        },
      ],
      supplierCity:[
        { name: "厦门" },
        { name: "泉州" },
        { name: "福州" },
      ],
      supplierList: [
        { id:1,name: "基地" },
        { id:2,name: "厂家" },
        { id:3,name: "品牌方" },
        { id:4,name: "种植户/养殖户" },
        { id:5,name: "经销商" },
        { id:6,name: "代理商" },
        { id:7,name: "进口商" },
      ],
      addSupplier: {
        login_phone: '',               //必填，登录手机号码
        business_license_image_id: '', //必填，营业执照图片
        name: '',                      //必填，供应商名称
        short_name: '',                //必填，供应商名称简称
        social_credit_code: '',        //必填，统一社会信用代码
        company_create_time: '',       //必填，公司成立日期,格式：2024-06-07
        company_address: '',           //必填，公司地址
        supply_channel: '',            //必填，主要供应渠道
        nature: '',                    //必填，供应商性质
        link_man: '',                  //必填，联系人
        link_phone: '',                //必填，联系电话
        registered_capital: '',        //必填，注册资本(万元)
        collaborate_city: '',          //必填，意向合作城市，用逗号分隔，如：厦门,泉州,福州
        main_business: '',             //必填，主营业务
        main_collaborate_class: '',    //主合作品类
        minor_collaborate_class: '',   //次合作品类
        collaborate_goods: [],         //必填，意向合作商品信息，格式：[{"good_brand":"品牌","good_name":"商品名称"}]
        quality_management_system: '', //必填，质量管理体系
        special_post_num: '',          //必填，品控专员人数数量
        has_development_ability: false,//是否具有自主研发能力
        cultivation_ability: '',    //生产/加工/养殖能力
        cultivation_scale: '',         //生产/加工工场地规模
        odm_ability: false,            //是否有ODM/OEM/代工能力
        odm_year: '',                  //ODM/OEM/代工年限
        logistics_ability: '',         //必填，物流能力
        action_support_ability: false, //是否提供活动支持能力
        quality_system_image_id: '',   //质量管理体系认证证书图片ID，用逗号分隔
        collaborate_customer: '',      //必填，重点合作客户
        tons_scale: '',                //必填，年供货规模
        product_example: '',           //必填，供货品牌及产品举例
        supply_image_id: '',           //必填，供货凭证图片ID，用逗号分隔
        trademark_register_image_id: '', //商标注册证图片ID，用逗号分隔
        product_image_id: '',          //流通/生产许可证图片ID，用逗号分隔
        authorization_image_id: '',    //品牌授权许可证图片ID，用逗号分隔
        processing_zone_image_id: '',  //加工区图片ID，用逗号分隔
        production_base_image_id: '',  //生产基地照片ID，用逗号分隔
        other_image_id: ''             //其他证照证书图片ID，用逗号分隔
      },

      uploadedFiles: [],
      activeTab: "基础信息",
      currentView: "",
      selectedSupplierName: "",
      selectedSupplier: "",
      tabs: [
        {
          index: 1,
          name: "基础信息",
          description: "请上传最新营业执照，并确保证件在有效期内，图像清晰完整",
        },
        {
          index: 2,
          name: "优势信息",
          description: "请填写最具竞争力或代表性的商品，更易脱颖而出",
        },
        {
          index: 3,
          name: "证照信息",
          description: "证照信息越全面，越容易通过审核。仅支持jpg,jpeg,png,pdf",
        },
      ],
      allProducts:[{
          good_brand: "",
          good_name: "",
          good_specification: "",
          good_bar_code: "",
          supply_price: "",
          retail_price: "",
          introduce_reason: "",
          uploadFileList: []
        }],
    };
  },
  created() {
    this.initMultiArray();
  },
  async onLoad(options) {
    this.addSupplier.login_phone = options.phone;

    // 尝试读取本地存储的数据
    try {
      const res = await new Promise((resolve, reject) => {
        uni.getStorage({
          key: 'SupplierList',
          success: resolve,
          fail: reject
        });
      });
      console.log('读取的数据：', res.data);
      this.addSupplier = res.data;
      this.allProducts = res.data.collaborate_goods.length 
        ? res.data.collaborate_goods 
        : this.allProducts;
    } catch (err) {
      console.error('数据读取失败', err);

      // 从API获取数据
      const { status, data, msg } = await this.$request(
        "/SmallProgramApi/ShiFu/getSupplierDetail",
        { store_id: this.$store.mallStoreId, login_phone: this.addSupplier.login_phone }
      );

      if (data.supplier_apply_info) {
        this.addSupplier = data.supplier_apply_info;
        this.allProducts = data.supplier_apply_info.collaborate_goods.length 
          ? data.supplier_apply_info.collaborate_goods 
          : this.allProducts;

        // 将获取到的数据存储到本地
        // uni.setStorage({
        //   key: 'SupplierList',
        //   data: data.supplier_apply_info,
        //   success: function () {
        //     console.log('数据存储成功');
        //   },
        //   fail: function (err) {
        //     console.error('数据存储失败', err);
        //   }
        // });
      }
    }
  },

  methods: {
    initMultiArray() {
      const multiArray = [];
      multiArray[0] = this.category.map(item => item.name);
      multiArray[1] = this.category[0].sub;
      this.multiArray = multiArray;
    },
    onPickerChange(e) {
      const val = e.detail.value;
      this.multiIndex = val;
      this.addSupplier.main_collaborate_class = `${this.multiArray[0][val[0]]} > ${this.multiArray[1][val[1]]}`;
    },
    onColumnChange(e) {
      const { column, value } = e.detail;
      const data = {
        multiArray: this.multiArray,
        multiIndex: this.multiIndex
      };
      data.multiIndex[column] = value;

      if (column === 0) {
        data.multiArray[1] = this.category[value].sub;
        data.multiIndex[1] = 0;
      }

      this.multiArray = data.multiArray;
      this.multiIndex = data.multiIndex;
    },


    deleteStorage(){
      uni.clearStorage({
      key: 'SupplierList',
      success: function () {
        console.log('数据移除成功');
      },
      fail: function (err) {
        console.error('数据移除失败', err);
      }
    });
    },

    removeProduct(olindex) {
      this.allProducts.splice(olindex, 1);
    },

    updateProduct(newProduct, olindex) {
      this.$set(this.allProducts, olindex, newProduct);
    },

    addProduct() {
      this.allProducts.push({
        good_brand: '',
        good_name: '',
        good_specification: '',
        good_bar_code: '',
        supply_price: '',
        retail_price: '',
        introduce_reason: '',
        uploadFileList: []
      });
    },

    //纳税规模
    handleSupplyPayTaxes(event){
      this.addSupplier.tax_scale = event.target.value;
    },
    //主要供应渠道
    handleSupplyChannelChange(event) {
      this.addSupplier.supply_channel = event.target.value;
    },

    //暂存数据
    onTemporaryStorage(){
      uni.setStorage({
        key: 'SupplierList',
        data: this.addSupplier,
        success: function () {
          uni.showToast({
              title: '数据存储成功',
              icon: 'none'
            });
        },
        fail: function (err) {
          uni.showToast({
              title: '数据存储失败',
              icon: 'none'
            });
        }
      });
    },


  async  onSubmit(){ 
      const checkResult = this.checkRequiredFields();
      if (checkResult === true) {
        // 所有必填字段都已填写，执行提交操作
        this.addSupplier.collaborate_goods  =JSON.stringify(this.allProducts );   
        const obj =  {
            ...this.addSupplier,
            store_id: this.$store.mallStoreId 
          }
                
        const { status, data ,msg} = await this.$request(
            "/SmallProgramApi/ShiFu/addSupplier",
            obj
          );
          if(status  == 1){
            uni.showToast({
              title: msg,
              icon: 'none'
            });
          }else{
            uni.showToast({
              title: msg,
              icon: 'none'
            });
          }
  
        console.log(data, '111111')
      } else {
        // 提示具体哪个字段没有填写
        uni.showToast({
            title: checkResult,
            icon: 'none'
          });
      }
      console.log(this.allProducts , '意向合作')
      console.log(   this.addSupplier   , '1111111111111')
      // console.log(this.allProducts , '这是添加的数据')
      // console.log(this.addSupplier , '111111111')

      // console.log(this.addSupplier  , 'addSupplier')
      
    },

    checkRequiredFields() {
      
      const requiredFields = {
        login_phone: '登录手机号码',
        business_license_image_id: '营业执照图片',
        name: '供应商名称',
        short_name: '供应商名称简称',
        social_credit_code: '统一社会信用代码',
        company_create_time: '公司成立日期',
        company_address: '公司地址',
        supply_channel: '主要供应渠道',
        nature: '供应商性质',
        link_man: '联系人',
        link_phone: '联系电话',
        registered_capital: '注册资本(万元)',
        collaborate_city: '意向合作城市',
        main_business: '主营业务',
        // collaborate_goods: '意向合作商品信息',
        quality_management_system: '质量管理体系',
        special_post_num: '品控专员人数数量',
        logistics_ability: '物流能力',
        collaborate_customer: '重点合作客户',
        tons_scale: '年供货规模',
        product_example: '供货品牌及产品举例',
        supply_image_id: '供货凭证图片ID',
        trademark_register_image_id: '商标注册证图片ID',
        product_image_id: '流通/生产许可证图片ID',
        authorization_image_id: '品牌授权许可证图片ID',
        processing_zone_image_id: '加工区图片ID',
        production_base_image_id: '生产基地照片ID',
        other_image_id: '其他证照证书图片ID'
      };

      for (const [field, fieldName] of Object.entries(requiredFields)) {
        if (!this.addSupplier[field] || (Array.isArray(this.addSupplier[field]) && this.addSupplier[field].length === 0)) {
          return `${fieldName} 不能为空`;
        }
      }
       // 所有必填字段都已填写，返回 true
      return true;
    },

    uploadFile(title) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadFileToServer(tempFilePaths[0] ,title);
        }
      });
    },
    
   async uploadFileToServer(filePath ,title) {
      const res = await upload({
          url: '/SmallProgramApi/ShiFu/uploadImage',
          path: filePath,
          //这里是选取的图片的地址数组
          name: 'file',
          formData: {
          from_type_id: '56', 
          }
      }, true)
      console.log(res  , 'res')
      switch(title){
        case  '基础信息':
          this.baseImgList.push(res.data.file)
          this.addSupplier.business_license_image_id =  this.baseImgList.map(supplier => supplier.id).join(',');
          this.baseImg =  this.baseImgList.map(supplier => supplier.image_url).join(',');

        break;
        case  '纳税证明附件':
          this.attachment.push(res.data.file)
          this.addSupplier.tax_image_id =  this.attachment.map(supplier => supplier.id).join(',');

        break;
        case  '质量管理体系认真证书':
          this.qualityControl.push(res.data.file)
          this.addSupplier.quality_management_system =  this.qualityControl.map(supplier => supplier.id).join(',');

        break;
        case  '供货凭证':
          this.Supply.push(res.data.file)
          this.addSupplier.supply_image_id =  this.Supply.map(supplier => supplier.id).join(',');

        break;
        case  '商标注册证':
        this.trademarkList.push(res.data.file)
        this.addSupplier.trademark_register_image_id =  this.trademarkList.map(supplier => supplier.id).join(',');

        break;
        case  '流通/生产许可证':
        this.ProductionLicense.push(res.data.file)
        this.addSupplier.product_image_id = this.ProductionLicense.map(supplier => supplier.id).join(',');

        break;
        case  '品牌授权许可':
        this.BrandAuthorizationLicense.push(res.data.file)
        this.addSupplier.authorization_image_id = this.BrandAuthorizationLicense.map(supplier => supplier.id).join(',');

        break;
        case  '加工区照片':
        this.PhotosProcessingArea.push(res.data.file)
        this.addSupplier.processing_zone_image_id = this.PhotosProcessingArea.map(supplier => supplier.id).join(',');

        break;
        case  '生产基地照片':
        this.PhotosProductionBase.push(res.data.file)
        this.addSupplier.production_base_image_id = this.PhotosProductionBase.map(supplier => supplier.id).join(',');

        break;
        case  '其他证照证书':

        this.otherList.push(res.data.file)
        this.addSupplier.other_image_id  = this.otherList.map(supplier => supplier.id).join(',');


        break;
      }
    },

    removeFile(index,title) {
      switch(title){
        case '纳税':
          this.attachment.splice(index, 1);
        break;
      }
      // this.uploadedFiles.splice(index, 1);
    },

    //弹窗
    handlerProblem() {
      this.$refs.popupComponent.handlerApply();
    },

    //准要求
    handlerRequire(){
      this.$refs.Ref_require.handlerApply();

    },
 

    
    //年供货
    onSupplierChangeTonsScale(e){
      const index = e.detail.value;
      this.addSupplier.tons_scale  = this.tons_scale_list[index].name;
    },

    //是否提供活动支持能力
    onSupplierChangeAction(e){
      const index = e.detail.value;
      this.addSupplier.action_support_ability  = this.action_support_ability_list[index].name;
    },

    onSupplierChangeLogistics(e){
      const index = e.detail.value;
      this.addSupplier.logistics_ability  = this.logistics_ability_list[index].name;
    },

    //质量
    onSupplierChangeQuality(e){
      const index = e.detail.value;
      this.addSupplier.quality_management_system  = this.supplierQuality[index].name;
    },

    //生产加工规模
    onSupplierChangeScale(e){
      const index = e.detail.value;
      this.addSupplier.cultivation_scale = this.supplierScale[index].name;
    },

    //意向合作城市
    onSupplierChangeCity(e){
      const index = e.detail.value;
      this.addSupplier.collaborate_city = this.supplierCity[index].name;

    },
    
    //滚动的
    scrollToSection(tabName, index) {
      this.activeTab = tabName;
      this.currentView = `section-${index}`;
      // 延迟设置以确保滚动位置正确
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(`#section-${index}`).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec((res) => {
          const sectionRect = res[0];
          const scrollOffset = res[1].scrollTop;
          const fixedHeight = 180; // 固定定位元素的高度
          const titleHeight = 80; // 标题的高度（根据实际情况调整）
          const sectionTitleHeight = 28; // section-title 的高度（根据实际情况调整）
          const scrollToPosition =
            sectionRect.top +
            scrollOffset -
            fixedHeight -
            titleHeight -
            sectionTitleHeight;
          uni.pageScrollTo({
            scrollTop: scrollToPosition,
            duration: 300,
          });
        });
      }, 100);
    },
    backHome() {
      uni.navigateBack();
    },
    //公司性质
    onSupplierChangeNature(event){
      const index = event.detail.value;
      this.addSupplier.nature  = this.supplierList[index].name;
    },
    // 公司成立日期
    onDateChange(event) {
      this.addSupplier.company_create_time = event.detail.value;
    },
  },
};
</script>
<style>
@import "./supplier_form.scss";
</style>
<style scoped>
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  background-color: #f9f9f9;
  margin-bottom: 5rpx;
}

.file-name {
  flex: 1;
  font-size: 14px;
  color: #333;
  width: 220rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.delete-btn-update {
  color: #4caf50;
  font-size: 14px;
  cursor: pointer;
}


.fontS {
  font-size: 20rpx;
}

.Staging {
  background-color: #e6f7e6;
  color: #52c41a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 135rpx;
  height: 90rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Submit {
  background-color: #52c41a;
  color: #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 135rpx;
  height: 90rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  background-color: white;
  border-top: 1px solid #e5e5e5;
  height: 80px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.picker-text {
  font-size: 14px; /* 设置字体大小 */
}

.scroll_content {
  border: 1px solid #f5f5f5;
  margin-top: 10px;
}
.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #e0e0e0;
  background-color: #fff;
  z-index: 1000;
  overflow-x: auto;
  white-space: nowrap;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  display: inline-block;
}

.tab.active {
  color: #00b050;
  font-weight: bold;
  border-bottom: 2px solid #00b050;
}

.content {
  height: calc(100vh - 180px); /* 确保 content 的高度正确 */
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.section {
  /* margin-bottom: 20px; */
  margin-left: 20px;
  margin-right: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.section-title .line {
  width: 5px;
  height: 18px;
  background-color: #00b050;
  margin-right: 8px;
  border-radius: 32px;
}

.description {
  font-size: 14px;
  color: #333;
  background-color: #f0f9f4;
  padding: 10px;
  border-radius: 4px;
}
</style>